<template>
  <div class="_bg text-center pt-80 pb-146 text-#fff">
    <h1 text-35 mb-25>资金安全保障</h1>
    <div class="text-#5F6368">多重防护机制，保障每笔交易安全</div>
    <div class="flex justify-center gap-104 mt-152">
      <div v-for="(i, idx) in steps" :key="idx" class="w-206">
        <div class="mb-20 font-700 text-24">{{ i.title }}</div>
        <div class="line-height-24">{{ i.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, shallowReactive } from 'vue'
const steps = shallowReactive([
  {
    title: '官方直连',
    desc: '直接连接支付宝/微信官方支付通道，无第三方转接'
  },
  {
    title: 'PCI DSS认证',
    desc: '通过国际支付行业最高安全认证标准'
  },
  {
    title: '实名认证',
    desc: '严格商户审核机制，确保交易主体真实性'
  },
  {
    title: '透明结算',
    desc: '清晰展示每笔费用明细，无隐藏扣费'
  }
])
</script>

<style scoped lang="scss">
._bg{
    background: linear-gradient(107deg, #1A1D2E 0%, #0F111F 100%);
}
</style>
